<template>
  <div>
    <van-nav-bar title="" left-text="" right-text="注册" left-arrow @click-left="onClickLeft" />
    <van-divider content-position="left" class="left">密码登录</van-divider>
    <van-divider content-position="right">短信验证码登录></van-divider>

    <!-- form表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="data.mobile"
          name="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="data.password"
          type="password"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field name="checkbox" :rules="[{ required: true, message: '请勾选' }]">
          <template #input>
            <van-checkbox v-model="data.checked" shape="square">
              我已同意<i>用户协议</i>及<i>隐私条款</i>
            </van-checkbox>
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="success" native-type="submit" class="login">
          登录
        </van-button>
      </div>
    </van-form>
    <van-divider content-position="left">忘记密码？</van-divider>
  </div>
</template>

<script lang='ts' setup>
import { userLogin } from '../utils/api'
import { ref, reactive, toRefs, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const data: any = reactive({
  checked: false,
  
    mobile: '13230000059',
    password: 'abc12345'
  
})

const onClickLeft = () => history.back()

const onSubmit = (values: any) => {
    userLogin({mobile:data.mobile,password:data.password}).then((res) => {
      console.log(res)
      if (res.code === 10000) {
        // 登陆成功
        localStorage.setItem('UserInfo', JSON.stringify(res.data))
        alert('登录成功')
        router.push('/mine')
      } else {
        alert('登录失败,用户或密码登录错误')
      }
    })
  }

</script>

<style scoped >
.left {
  font-size: 25px;
  color: #000;
}
i {
  margin: 0 4px;
  font-style: normal;
  color: aquamarine;
}
.login {
  letter-spacing: 4px;
}
</style>